$ns: cxd-;

.Theme-Wrapper {
  .common-icon {
    width: px2rem(16px);
    height: px2rem(16px);
    cursor: pointer;
    color: #5c5f66;
  }
  .common-icon--active {
    color: #2468f2;
  }

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: px2rem(8px);

    &-left {
      font-size: 12px;
      color: #070c14;
      line-height: px2rem(20px);
      font-weight: 400;
    }

    &-right {
      display: flex;
      align-items: center;

      .arrow-icon {
        width: px2rem(10px);
        height: px2rem(10px);
        color: #84868c;
        transform: rotate(90deg);
        transition: transform 0.2s ease;
        margin-left: px2rem(8px);
        cursor: pointer;
      }

      .arrow-icon-reverse {
        transform: rotate(270deg);
      }
    }
  }

  &-body {
    .#{$ns}Form-item {
      margin-bottom: px2rem(16px);
    }

    .theme-select .#{$ns}Form-item {
      margin-bottom: 0;
    }

    .theme-select,
    .#{$ns}IconSelectControl-input {
      border-radius: 0 px2rem(4px) px2rem(4px) 0;
      height: px2rem(32px);
    }

    .#{$ns}Form-label {
      border: 1px solid #e8e9eb;
      border-right: none;
      border-radius: px2rem(4px) 0 0 px2rem(4px);
      padding: 0 px2rem(12px);
      width: auto !important;
      flex-grow: 0;
      height: px2rem(32px);
    }
  }
}
